﻿@page "/component/data/gridview"
@using BlamanticUI.Components.DataBindings
<Pager DataSource="@(new List<string>
                     {
                         "Demo","Annotation","Bound Field","Template Field","Column Width","Row Height","Header/Footer Template","Empty Template",
                         "Pagination","Fetch Remoting Data","Compact","Celled","Structured","Basic","Padded","Colored","Size","Inverted"
                     })">
    <Body>
        <Header1 Divider="true">
            GridView
            <SubHeader>A data binding to render a functional table</SubHeader>
        </Header1>
        <PresentationPart Title="Demo">
            <Description>
                Auto generate columns
            </Description>
            <RunTemplate>
                <GridView DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Annotation">
            <Description>
                Support <code>System.ComponentModel.DataAnnotations</code> for auto generate columns
            </Description>
            <RunTemplate>
                <GridView DataSource="Users1" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
class User
{
    [Display(Name=""Id Number"")]
    public int Id { get; set; }

    public string Name { get; set; }

    [DisplayFormat(DataFormatString =""{0:MM/dd/yy}"")]
    public DateTime Birthday { get; set; }
}

IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>

        <Header4 Divider="true">
            Columns
        </Header4>
        <PresentationPart Title="Bound Field">
            <Description>
                Binding field to display in grid by following order.
            </Description>
            <RunTemplate>
                <GridView DataSource="Users" AutoGenerateColumns="false">
                    <Columns>
                        <GridViewBoundField DataField="@nameof(User.Name)" HeaderText="User Name" />
                        <GridViewBoundField DataField="@(nameof(User.Birthday))" FieldFormat="{0:dd/MM/yyyy}" />
                    </Columns>
                </GridView>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""Users"" AutoGenerateColumns=""false"">
    <Columns>
        <GridViewBoundField DataField=""@nameof(User.Name)"" HeaderText=""User Name""/>
        <GridViewBoundField DataField=""@(nameof(User.Birthday))"" FieldFormat=""{0:dd/MM/yyyy}""/>
    </Columns>
</GridView>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Template Field">
            <Description>
                Customize UI content of this cell
            </Description>
            <RunTemplate>
                <GridView DataSource="Users" AutoGenerateColumns="false">
                    <Columns>
                        <GridViewBoundField DataField="@nameof(User.Name)" HeaderText="User Name" />
                        <GridViewBoundField DataField="@(nameof(User.Birthday))" FieldFormat="{0:dd/MM/yyyy}" />
                        <GridViewTemplateField HeaderText="Operation">
                            <ItemTemplate>
                                <Anchor Link="@(GridView.GetFieldValue<string>(context,nameof(User.Id)))">
                                    <Icon IconClass="edit" />
                                </Anchor>
                                <Anchor Link="@(GridView.GetFieldValue<string>(context,nameof(User.Id)))">
                                    <Icon IconClass="delete" />
                                </Anchor>
                            </ItemTemplate>
                        </GridViewTemplateField>
                    </Columns>
                </GridView>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""Users"" AutoGenerateColumns=""false"">
    <Columns>
        <GridViewBoundField DataField=""@nameof(User.Name)"" HeaderText=""User Name""/>
        <GridViewBoundField DataField=""@(nameof(User.Birthday))"" FieldFormat=""{0:dd/MM/yyyy}"" />
        <GridViewTemplateField HeaderText=""Operation"">
            <ItemTemplate>
                <Anchor Link=""@(GridView.GetFieldValue<string>(context,nameof(User.Id)))"">
                    <Icon IconClass=""edit"" />
                </Anchor>
                <Anchor Link=""@(GridView.GetFieldValue<string>(context,nameof(User.Id)))"">
                    <Icon IconClass=""delete"" />
                </Anchor>
            </ItemTemplate>
        </GridViewTemplateField>
    </Columns>
</GridView>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Column Width">
            <Description>
                Customize column width
            </Description>
            <RunTemplate>
                <GridView DataSource="Users" AutoGenerateColumns="false">
                    <Columns>
                        <GridViewBoundField DataField="@nameof(User.Name)" HeaderText="User Name" Width="10%" />
                        <GridViewBoundField DataField="@(nameof(User.Birthday))" FieldFormat="{0:dd/MM/yyyy}" />
                        <GridViewTemplateField HeaderText="Operation" Width="100px">
                            <ItemTemplate>
                                <Anchor Link="@(GridView.GetFieldValue<string>(context,nameof(User.Id)))">
                                    <Icon IconClass="edit" />
                                </Anchor>
                                <Anchor Link="@(GridView.GetFieldValue<string>(context,nameof(User.Id)))">
                                    <Icon IconClass="delete" />
                                </Anchor>
                            </ItemTemplate>
                        </GridViewTemplateField>
                    </Columns>
                </GridView>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""Users"" AutoGenerateColumns=""false"">
    <Columns>
        <GridViewBoundField DataField=""@nameof(User.Name)"" HeaderText=""User Name"" Width=""10%""/>
        <GridViewBoundField DataField=""@(nameof(User.Birthday))"" FieldFormat=""{0:dd/MM/yyyy}"" />
        <GridViewTemplateField HeaderText=""Operation"" Width=""100px"">
            <ItemTemplate>
                <Anchor Link=""@(GridView.GetFieldValue<string>(context,nameof(User.Id)))"">
                    <Icon IconClass=""edit"" />
                </Anchor>
                <Anchor Link=""@(GridView.GetFieldValue<string>(context,nameof(User.Id)))"">
                    <Icon IconClass=""delete"" />
                </Anchor>
            </ItemTemplate>
        </GridViewTemplateField>
    </Columns>
</GridView>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Row Height">
            <Description>
                Auto scrollable when overflow the <code>RowHeight</code>
            </Description>
            <RunTemplate>
                <GridView DataSource="Users" RowHeight="600px" />
                <Space />
                <GridView DataSource="Users.Concat(Users).Concat(Users)" RowHeight="200px" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""Users"" RowHeight=""600px"" />
<GridView DataSource=""Users.Concat(Users).Concat(Users)"" RowHeight=""200px"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Header/Footer Template">
            <RunTemplate>
                <GridView DataSource="Users">
                    <HeaderTemplate>
                        <TableRow>
                            <TableHeader HorizontalAlignment="HorizontalAlignment.Center" colspan="3">
                                Here is our data
                            </TableHeader>
                        </TableRow>
                        <TableRow>
                            <TableHeader rowspan="2">Id</TableHeader>
                            <TableHeader>Name</TableHeader>
                            <TableHeader>Birthday(Age)</TableHeader>
                        </TableRow>
                    </HeaderTemplate>
                    <FooterTemplate>
                        <TableRow>
                            <TableCell HorizontalAlignment="HorizontalAlignment.Right">
                                <Label Color="Color.Red">Total: @(Users.Count())</Label>
                            </TableCell>
                        </TableRow>
                    </FooterTemplate>
                </GridView>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""Users"">
    <HeaderTemplate>
        <TableRow>
            <TableHeader HorizontalAlignment=""HorizontalAlignment.Center"" colspan=""3"">
                Here is our data
            </TableHeader>
        </TableRow>
        <TableRow>
            <TableHeader rowspan=""2"">Id</TableHeader>
            <TableHeader>Name</TableHeader>
            <TableHeader>Birthday(Age)</TableHeader>
        </TableRow>
    </HeaderTemplate>
    <FooterTemplate>
        <TableRow>
            <TableCell HorizontalAlignment=""HorizontalAlignment.Right"">
                <Label Color=""Color.Red"">Total: @(Users.Count())</Label>
            </TableCell>
        </TableRow>
    </FooterTemplate>
</GridView>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Empty Template">
            <Description>
                Customize the content when data is empty
            </Description>
            <RunTemplate>
                <GridView DataSource="new List<User>()" />
                <Space />
                <GridView DataSource="new List<User>()">
                    <EmptyTemplate>
                        <Message State="State.Info" Title="Nothing" Text="I can't find anything you want" />
                    </EmptyTemplate>
                </GridView>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""new List<User>()"" />

<GridView DataSource=""new List<User>()"">
    <EmptyTemplate>
        <Message State=""State.Info"" Title=""Nothing"" Text=""I can't find anything you want""/>
    </EmptyTemplate>
</GridView>
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Pagination">
            <RunTemplate>
                <GridView DataSource="dataModels" ShowPagination TotalCount="dataModels.Count" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""dataModels"" ShowPagination TotalCount=""dataModels.Count""/>
```
```cs
public class Employee
{
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string EMail { get; set; }
    public string City { get; set; }
    public string Zip { get; set; }
    public DateTime? DateOfBirth { get; set; }
    public int? Childrens { get; set; }
    public string Gender { get; set; }
    public decimal Salary { get; set; }
    public bool IsActive { get; set; }
    public List<Salary> Salaries { get; set; } = new List<Salary>();
}

public class Salary
{
    public DateTime Date { get; set; }
    public decimal Total { get; set; }
}


// generated with https://mockaroo.com/
List<Employee> dataModels = new List<Employee> {
    new Employee {Id = 1,FirstName = ""Caro"",LastName = ""Nizard"",EMail = ""cnizard0@hc360.com"",City = ""Faīẕābād"",Zip = null,Salary = 51724.19m, DateOfBirth = new DateTime(1983,5,8),
        Salaries = new List<Salary> {
            new Salary { Date = new DateTime(2019,1,6), Total = 6000 },
            new Salary { Date = new DateTime(2019,2,7), Total = 5005 },
            new Salary { Date = new DateTime(2019,3,5), Total = 3000 }
        }},
    new Employee {Id = 2,FirstName = ""Matthew"",LastName = ""Labb"",EMail = ""mlabb1@ca.gov"",City = ""Xinxi"",Zip = null,Salary = 65176.6m, Childrens=2},
    new Employee {Id = 3,FirstName = ""Enos"",LastName = ""Clendennen"",EMail = ""eclendennen2@shareasale.com"",City = ""Listvyanskiy"",Zip = ""633224"",Salary = 75602.48m, Childrens=1,
        Salaries = new List<Salary> {
            new Salary { Date = new DateTime(2019,2,7), Total = 4005 },
            new Salary { Date = new DateTime(2019,3,5), Total = 8000 }
        }},
    new Employee {Id = 4,FirstName = ""Cirilo"",LastName = ""Douch"",EMail = ""cdouch3@thetimes.co.uk"",City = ""Wiset Chaichan"",Zip = ""84280"",Salary = 88511.38m, IsActive = true },
    new Employee {Id = 5,FirstName = ""Bibbie"",LastName = ""Prahm"",EMail = ""bprahm4@dropbox.com"",City = ""Nkandla"",Zip = ""3859"",Salary = 41665.0m },
    new Employee {Id = 6,FirstName = ""Ferd"",LastName = ""Bizzey"",EMail = ""fbizzey5@vimeo.com"",City = ""Arroyo Seco"",Zip = ""5196"",Salary = 58632.74m, IsActive = true },
    new Employee {Id = 7,FirstName = ""Annalee"",LastName = ""Mathie"",EMail = ""amathie6@qq.com"",City = ""Qi’an"",Zip = null,Salary = 38622.71m },
    new Employee {Id = 8,FirstName = ""Sarajane"",LastName = ""Sarney"",EMail = ""ssarney7@phoca.cz"",City = ""Wagini"",Zip = null,Salary = 67163.94m },
    new Employee {Id = 9,FirstName = ""Lissa"",LastName = ""Clemenzi"",EMail = ""lclemenzi8@si.edu"",City = ""Lijiang"",Zip = null,Salary = 67078.77m },
    new Employee {Id = 10,FirstName = ""Taber"",LastName = ""Kowal"",EMail = ""tkowal9@ustream.tv"",City = ""Muhos"",Zip = ""91501"",Salary = 70385.0m },
    new Employee {Id = 11,FirstName = ""Christyna"",LastName = ""Blaylock"",EMail = ""cblaylocka@gov.uk"",City = ""Kruševo"",Zip = ""34320"",Salary = 20626.15m, Childrens=4 },
    new Employee {Id = 12,FirstName = ""Honoria"",LastName = ""Stirtle"",EMail = ""hstirtleb@ox.ac.uk"",City = ""Muang Phôn-Hông"",Zip = null,Salary = 48999.42m, Childrens=1 },
    new Employee {Id = 13,FirstName = ""Gregory"",LastName = ""Sinden"",EMail = ""gsindenc@go.com"",City = ""Kampunglistrik"",Zip = null,Salary = 38097.16m, Childrens=2 },
    new Employee {Id = 14,FirstName = ""Obediah"",LastName = ""Stroban"",EMail = ""ostroband@nbcnews.com"",City = ""Almoínhas Velhas"",Zip = ""2755-163"",Salary = 83997.47m },
    new Employee {Id = 15,FirstName = ""Kellen"",LastName = ""Zanotti"",EMail = ""kzanottie@123-reg.co.uk"",City = ""Türkmenabat"",Zip = null,Salary = 37339.0m },
    new Employee {Id = 16,FirstName = ""Luelle"",LastName = ""Mowles"",EMail = ""lmowlesf@wikimedia.org"",City = ""Durham"",Zip = ""27717"",Salary = 89879.64m },
    new Employee {Id = 17,FirstName = ""Venita"",LastName = ""Petkovic"",EMail = ""vpetkovicg@twitpic.com"",City = ""Radoboj"",Zip = ""49232"",Salary = 22979.32m },
    new Employee {Id = 18,FirstName = ""Gates"",LastName = ""Neat"",EMail = ""gneath@youtu.be"",City = ""Solna"",Zip = ""170 77"",Salary = 75811.63m },
    new Employee {Id = 19,FirstName = ""Roland"",LastName = ""Frangleton"",EMail = ""rfrangletoni@umich.edu"",City = ""Tío Pujio"",Zip = ""5936"",Salary = 58971.76m, Childrens=3 },
    new Employee {Id = 20,FirstName = ""Ferdinande"",LastName = ""Pidcock"",EMail = ""fpidcockj@independent.co.uk"",City = ""Paris 11"",Zip = ""75547 CEDEX 11"",Salary = 82223.65m },
    new Employee {Id = 21,FirstName = ""Clarie"",LastName = ""Crippin"",EMail = ""ccrippink@lycos.com"",City = ""Gostyń"",Zip = ""63-816"",Salary = 79390.13m },
    new Employee {Id = 22,FirstName = ""Israel"",LastName = ""Carlin"",EMail = ""icarlinl@washingtonpost.com"",City = ""Poitiers"",Zip = ""86042 CEDEX 9"",Salary = 36875.18m },
    new Employee {Id = 23,FirstName = ""Christoper"",LastName = ""Moorton"",EMail = ""cmoortonm@gizmodo.com"",City = ""Jambangan"",Zip = null,Salary = 76787.57m },
    new Employee {Id = 24,FirstName = ""Trina"",LastName = ""Seamen"",EMail = ""tseamenn@foxnews.com"",City = ""Song"",Zip = ""54120"",Salary = 43598.06m },
    new Employee {Id = 25,FirstName = ""Douglass"",LastName = ""Amor"",EMail = ""damoro@house.gov"",City = ""Castillos"",Zip = null,Salary = 49865.8m, Childrens=2, IsActive = true },
    new Employee {Id = 26,FirstName = ""Reeta"",LastName = ""Acom"",EMail = ""racomp@fc2.com"",City = ""Baoping"",Zip = null,Salary = 61296.4m },
    new Employee {Id = 27,FirstName = ""Chandler"",LastName = ""Franzonetti"",EMail = ""cfranzonettiq@archive.org"",City = ""Emin"",Zip = null,Salary = 67458.07m, Childrens=1 }
};
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Fetch Remoting Data">
            <Description>
                Fetch data from database or api.
            </Description>
            <RunTemplate>
                <GridView Color="Color.Blue" DataSource="pagedData" TotalCount="total" ShowPagination OnDataLoading="LoadData" Inverted />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```html
<GridView DataSource=""pagedData"" TotalCount=""total"" ShowPagination OnDataLoading=""LoadData"" />
```
```cs
int total = 0;
IEnumerable<Employee> pagedData=new List<Employee>();
async Task LoadData(GridViewPaginationEventArgs e)
{
    await Task.Delay(2000);

    //mock the server pagination
    pagedData = dataModels.Skip((e.CurrentPage - 1) * e.PageSize).Take(e.PageSize);

    total = dataModels.Count;
}
```
")
            </CodeTemplate>
        </PresentationPart>
        @code{
            public class Employee
            {
                public int Id { get; set; }
                public string FirstName { get; set; }
                public string LastName { get; set; }
                public string EMail { get; set; }
                public string City { get; set; }
                public string Zip { get; set; }
                public DateTime? DateOfBirth { get; set; }
                public int? Childrens { get; set; }
                public string Gender { get; set; }
                public decimal Salary { get; set; }
                public bool IsActive { get; set; }
                public List<Salary> Salaries { get; set; } = new List<Salary>();
            }

            public class Salary
            {
                public DateTime Date { get; set; }
                public decimal Total { get; set; }
            }


            // generated with https://mockaroo.com/
            List<Employee> dataModels = new List<Employee> {
        new Employee {Id = 1,FirstName = "Caro",LastName = "Nizard",EMail = "cnizard0@hc360.com",City = "Faīẕābād",Zip = null,Salary = 51724.19m, DateOfBirth = new DateTime(1983,5,8),
            Salaries = new List<Salary> {
                new Salary { Date = new DateTime(2019,1,6), Total = 6000 },
                new Salary { Date = new DateTime(2019,2,7), Total = 5005 },
                new Salary { Date = new DateTime(2019,3,5), Total = 3000 }
            }},
        new Employee {Id = 2,FirstName = "Matthew",LastName = "Labb",EMail = "mlabb1@ca.gov",City = "Xinxi",Zip = null,Salary = 65176.6m, Childrens=2},
        new Employee {Id = 3,FirstName = "Enos",LastName = "Clendennen",EMail = "eclendennen2@shareasale.com",City = "Listvyanskiy",Zip = "633224",Salary = 75602.48m, Childrens=1,
            Salaries = new List<Salary> {
                new Salary { Date = new DateTime(2019,2,7), Total = 4005 },
                new Salary { Date = new DateTime(2019,3,5), Total = 8000 }
            }},
        new Employee {Id = 4,FirstName = "Cirilo",LastName = "Douch",EMail = "cdouch3@thetimes.co.uk",City = "Wiset Chaichan",Zip = "84280",Salary = 88511.38m, IsActive = true },
        new Employee {Id = 5,FirstName = "Bibbie",LastName = "Prahm",EMail = "bprahm4@dropbox.com",City = "Nkandla",Zip = "3859",Salary = 41665.0m },
        new Employee {Id = 6,FirstName = "Ferd",LastName = "Bizzey",EMail = "fbizzey5@vimeo.com",City = "Arroyo Seco",Zip = "5196",Salary = 58632.74m, IsActive = true },
        new Employee {Id = 7,FirstName = "Annalee",LastName = "Mathie",EMail = "amathie6@qq.com",City = "Qi’an",Zip = null,Salary = 38622.71m },
        new Employee {Id = 8,FirstName = "Sarajane",LastName = "Sarney",EMail = "ssarney7@phoca.cz",City = "Wagini",Zip = null,Salary = 67163.94m },
        new Employee {Id = 9,FirstName = "Lissa",LastName = "Clemenzi",EMail = "lclemenzi8@si.edu",City = "Lijiang",Zip = null,Salary = 67078.77m },
        new Employee {Id = 10,FirstName = "Taber",LastName = "Kowal",EMail = "tkowal9@ustream.tv",City = "Muhos",Zip = "91501",Salary = 70385.0m },
        new Employee {Id = 11,FirstName = "Christyna",LastName = "Blaylock",EMail = "cblaylocka@gov.uk",City = "Kruševo",Zip = "34320",Salary = 20626.15m, Childrens=4 },
        new Employee {Id = 12,FirstName = "Honoria",LastName = "Stirtle",EMail = "hstirtleb@ox.ac.uk",City = "Muang Phôn-Hông",Zip = null,Salary = 48999.42m, Childrens=1 },
        new Employee {Id = 13,FirstName = "Gregory",LastName = "Sinden",EMail = "gsindenc@go.com",City = "Kampunglistrik",Zip = null,Salary = 38097.16m, Childrens=2 },
        new Employee {Id = 14,FirstName = "Obediah",LastName = "Stroban",EMail = "ostroband@nbcnews.com",City = "Almoínhas Velhas",Zip = "2755-163",Salary = 83997.47m },
        new Employee {Id = 15,FirstName = "Kellen",LastName = "Zanotti",EMail = "kzanottie@123-reg.co.uk",City = "Türkmenabat",Zip = null,Salary = 37339.0m },
        new Employee {Id = 16,FirstName = "Luelle",LastName = "Mowles",EMail = "lmowlesf@wikimedia.org",City = "Durham",Zip = "27717",Salary = 89879.64m },
        new Employee {Id = 17,FirstName = "Venita",LastName = "Petkovic",EMail = "vpetkovicg@twitpic.com",City = "Radoboj",Zip = "49232",Salary = 22979.32m },
        new Employee {Id = 18,FirstName = "Gates",LastName = "Neat",EMail = "gneath@youtu.be",City = "Solna",Zip = "170 77",Salary = 75811.63m },
        new Employee {Id = 19,FirstName = "Roland",LastName = "Frangleton",EMail = "rfrangletoni@umich.edu",City = "Tío Pujio",Zip = "5936",Salary = 58971.76m, Childrens=3 },
        new Employee {Id = 20,FirstName = "Ferdinande",LastName = "Pidcock",EMail = "fpidcockj@independent.co.uk",City = "Paris 11",Zip = "75547 CEDEX 11",Salary = 82223.65m },
        new Employee {Id = 21,FirstName = "Clarie",LastName = "Crippin",EMail = "ccrippink@lycos.com",City = "Gostyń",Zip = "63-816",Salary = 79390.13m },
        new Employee {Id = 22,FirstName = "Israel",LastName = "Carlin",EMail = "icarlinl@washingtonpost.com",City = "Poitiers",Zip = "86042 CEDEX 9",Salary = 36875.18m },
        new Employee {Id = 23,FirstName = "Christoper",LastName = "Moorton",EMail = "cmoortonm@gizmodo.com",City = "Jambangan",Zip = null,Salary = 76787.57m },
        new Employee {Id = 24,FirstName = "Trina",LastName = "Seamen",EMail = "tseamenn@foxnews.com",City = "Song",Zip = "54120",Salary = 43598.06m },
        new Employee {Id = 25,FirstName = "Douglass",LastName = "Amor",EMail = "damoro@house.gov",City = "Castillos",Zip = null,Salary = 49865.8m, Childrens=2, IsActive = true },
        new Employee {Id = 26,FirstName = "Reeta",LastName = "Acom",EMail = "racomp@fc2.com",City = "Baoping",Zip = null,Salary = 61296.4m },
        new Employee {Id = 27,FirstName = "Chandler",LastName = "Franzonetti",EMail = "cfranzonettiq@archive.org",City = "Emin",Zip = null,Salary = 67458.07m, Childrens=1 }
    };
            int total = 0;
            IEnumerable<Employee> pagedData = new List<Employee>();
            async Task LoadData(GridViewPaginationEventArgs e)
            {
                await Task.Delay(2000);
                pagedData = dataModels.Skip((e.CurrentPage - 1) * e.PageSize).Take(e.PageSize);
                total = dataModels.Count;
            }
        }

        <PresentationPart Title="Compact">
            <RunTemplate>
                <GridView Compact DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Compact DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Celled">
            <RunTemplate>
                <GridView Celled DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Celled DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Structured">
            <RunTemplate>
                <GridView Structured DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Structured DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Basic">
            <RunTemplate>
                <GridView Basic DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Basic DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Padded">
            <RunTemplate>
                <GridView Padded DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Padded DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Colored">
            <Description>Same color definition as <code>Table</code> component.</Description>
            <RunTemplate>
                <GridView Color="Color.Red" DataSource="Users" />
                <Space />
                <GridView Color="Color.Green" Inverted DataSource="Users" />
                <Space />
                <GridView Color="Color.Blue" Inverted InvertedHeaderOnly DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Color=""Color.Red"" DataSource=""Users"" />
<GridView Color=""Color.Green"" Inverted DataSource=""Users"" />
<GridView Color=""Color.Blue"" Inverted InvertedHeaderOnly DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>


        <PresentationPart Title="Size">
            <Description>Same definition as <code>Table</code> component.</Description>
            <RunTemplate>
                <GridView Size="Size.Tiny" DataSource="Users" />
                <Space />
                <GridView Size="Size.Large" DataSource="Users" />
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<GridView Size=""Size.Tiny"" DataSource=""Users"" />
<GridView Size=""Size.Large"" DataSource=""Users"" />
```
")
            </CodeTemplate>
        </PresentationPart>
        <PresentationPart Title="Inverted">
            <RunTemplate>
                <Segment Inverted>
                    <GridView Inverted DataSource="Users" />
                </Segment>
            </RunTemplate>
            <CodeTemplate>
                @Code.GetCode(@"
```cs
IEnumerable<User> Users => new List<User>
{
    new User { Id = 1, Name = ""James"", Birthday = new DateTime(1977, 5, 6) },
    new User { Id = 2, Name = ""Lita"", Birthday = new DateTime(1993, 2, 1) },
    new User { Id = 3, Name = ""Sally"", Birthday = new DateTime(1968, 6, 15) },
    new User { Id = 4, Name = ""Williams"", Birthday = new DateTime(1996, 12, 27) },
    new User { Id = 5, Name = ""Judy"", Birthday = new DateTime(1988, 10, 22) },
};
```
```html
<Segment Inverted>
    <GridView Inverted DataSource=""Users"" />
</Segment>
```
")
            </CodeTemplate>
        </PresentationPart>
    </Body>
</Pager>

@code{ 
    class User
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public DateTime Birthday { get; set; }
    }

    IEnumerable<User> Users => new List<User>
    {
        new User { Id = 1, Name = "James", Birthday = new DateTime(1977, 5, 6) },
        new User { Id = 2, Name = "Lita", Birthday = new DateTime(1993, 2, 1) },
        new User { Id = 3, Name = "Sally", Birthday = new DateTime(1968, 6, 15) },
        new User { Id = 4, Name = "Williams", Birthday = new DateTime(1996, 12, 27) },
        new User { Id = 5, Name = "Judy", Birthday = new DateTime(1988, 10, 22) },
    };

    class User1
    {
        [Display(Name="Id Number")]
        public int Id { get; set; }
        public string Name { get; set; }
        [DisplayFormat(DataFormatString ="{0:MM/dd/yy}")]
        public DateTime Birthday { get; set; }
    }

    IEnumerable<User1> Users1 => new List<User1>
    {
        new User1 { Id = 1, Name = "James", Birthday = new DateTime(1977, 5, 6) },
        new User1 { Id = 2, Name = "Lita", Birthday = new DateTime(1993, 2, 1) },
        new User1 { Id = 3, Name = "Sally", Birthday = new DateTime(1968, 6, 15) },
        new User1 { Id = 4, Name = "Williams", Birthday = new DateTime(1996, 12, 27) },
        new User1 { Id = 5, Name = "Judy", Birthday = new DateTime(1988, 10, 22) },
    };
}